<template>
    <div class="container">
        <div class="navLeft" :style="{width:isCollapse?'65px':'200px',background:currentColor}">
            <div class="logo">
                <div>{{!isCollapse?'酒店管理系统':'Hotel'}}</div>
            </div>
            <!--左侧导航-->
            <el-menu
                    active-text-color="#ffd04b"
                    :background-color="currentColor"
                    class="el-menu-vertical-demo"
                    default-active="1-1"
                    text-color="#fff"
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    unique-opened
                    router
            >
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <avatar/>
                        </el-icon>
                        <span>账户管理</span>
                    </template>
                    <el-menu-item index="/layout/role">角色管理</el-menu-item>
                    <el-menu-item index="/layout/admin">账户管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <home-filled/>
                        </el-icon>
                        <span>客房管理</span>
                    </template>
                    <el-menu-item index="/layout/roomType">类型管理</el-menu-item>
                    <el-menu-item index="/layout/room">客房管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <user-filled/>
                        </el-icon>
                        <span>顾客管理</span>
                    </template>
                    <el-menu-item index="/layout/guest">顾客管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>
                        <el-icon>
                            <setting/>
                        </el-icon>
                        <span>权限管理</span>
                    </template>
                    <el-menu-item index="4-1">权限管理</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
        <div class="navRight">
            <!--头部区域-->
            <div class="top" :style="{background: currentColor}">
                <div class="icon" @click="isCollapse=!isCollapse">
                    <el-icon size="25px">
                        <grid/>
                    </el-icon>
                </div>
                <!--右侧导航-->
                <div>
                    <el-menu
                            default-active="1"
                            class="el-menu-demo"
                            mode="horizontal"
                            :background-color="currentColor"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                    >
                        <el-menu-item index="1" @click="$router.push('/layout/home')">首页</el-menu-item>
                        <el-menu-item index="2" @click="$router.push('/layout/email')" >邮箱</el-menu-item>
                        <el-menu-item index="3" @click="$router.push('/layout/message')">消息</el-menu-item>
                        <el-sub-menu index="4">
                            <template #title>切换皮肤</template>
                            <el-menu-item @click="changeColor(index)" :index="'4-'+index"
                                          v-for="(item,index) in getColorName" :key="index">{{item}}
                            </el-menu-item>

                        </el-sub-menu>
                        <el-sub-menu index="5">
                            <template #title>{{$store.state.admin.admin.name}}</template>
                            <el-menu-item index="5-1" @click="$router.push('/layout/mine')">个人中心</el-menu-item>
                            <el-menu-item index="5-2" @click="$router.push('/layout/resetPwd')">修改密码</el-menu-item>
                            <el-menu-item index="5-3" @click="back">退出</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </div>
            </div>
            <!--主体区域-->
            <div class="bottom">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    import {useStore} from 'vuex'
    import {reactive, toRefs, computed} from 'vue'
    import {useRouter} from 'vue-router'
    import {Avatar, HomeFilled, UserFilled, Setting, Grid} from '@element-plus/icons-vue'

    export default {
        name: "Layout",
        components: {Avatar, HomeFilled, UserFilled, Setting, Grid},
        setup() {

            // 路由对象
            let $router = useRouter()
            // 全局管理对象
            let $store = useStore()
            // 获取浏览器缓存的颜色
            if (localStorage.getItem('color')) {
                let color = {
                    color: localStorage.getItem('color'),
                    name: localStorage.getItem('colorName')
                }
                $store.dispatch('theme/updateCurrentColor',color)
            }
            let data = reactive({
                isCollapse: false  //左侧菜单打开
            })
            // 2.从全局状态获取颜色数组 动态绑定名称
            let getColorName = computed(() => {
                return $store.getters['theme/getColorName']
            })
            // 1.当前颜色
            let currentColor = computed(() => {
                return $store.state.theme.currentColor.color
            })
            // 3.点击切换颜色
            let changeColor = (index) => {
                // 根据id获取当前颜色
                let color = $store.state.theme.colors[index]
                // 将获取的颜色保存到缓冲中
                localStorage.setItem('color', color.color)
                localStorage.setItem('colorName', color.name)
                $store.dispatch('theme/updateCurrentColor', color)
            }
            // 退出
            let back = () => {
                $router.push('/login')
                localStorage.removeItem('token')
                localStorage.removeItem('password')
            }
            return {
                ...toRefs(data),
                back,
                getColorName,
                currentColor,
                changeColor
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-menu {
        border-right: none;
        border-bottom: none;
        height: 100%;
    }

    .container {
        width: 100vw;
        height: 100vh;
        display: flex;

        .navLeft {
            /*background:#545c64 ;*/
            .logo {
                height: 60px;
                display: flex;
                justify-content: center;
                align-items: center;

                div {
                    color: #ffffff;
                    font-size: 18px;
                    border: 1px solid #eeeeee;
                    padding: 4px 10px;
                    border-radius: 4px;
                }
            }
        }

        .navRight {
            flex: 1;
            display: flex;
            flex-direction: column;

            .top {
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                /*background: #545c64;*/
                .icon {
                    color: white;
                }

                div {
                    width: 500px;
                }
            }

            .bottom {
                flex: 1;
                padding: 6px;
            }
        }

    }

</style>
